﻿@page

@using Volo.CmsKit.Blogs
@using Volo.CmsKit.Public.Web.Pages
@using Volo.Abp.GlobalFeatures
@using Volo.CmsKit.GlobalFeatures
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.MarkedItemToggle
@using Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs
@using Volo.CmsKit.Web

@inherits CmsKitPublicPageBase

@model IndexModel

@{
    const string dummyImageSource = "/cms-kit/dummy-placeholder-320x180.png";
    var isMarkedItemFeatureEnabled = GlobalFeatureManager.Instance.IsEnabled<MarkedItemsFeature>() && 
                                     (Model.MarkedItemsFeature?.IsEnabled == true || Model.FilterOnFavorites.HasValue);
}

@section styles {
    <abp-style src="/Pages/Public/CmsKit/Blogs/index.css" />
}

@section scripts {
    <abp-script-bundle>
        <abp-script src="/Pages/Public/CmsKit/Blogs/index.js" />
        @if (isMarkedItemFeatureEnabled)
        {
            <abp-script src="/Pages/Public/CmsKit/Blogs/filter-on-favorites.js" />
        }
    </abp-script-bundle>
}

@if (Model.AuthorId.HasValue)
{
    <abp-row id="blogs-filter-area">
        <abp-column size="_4">
            <div class="mb-3">
                <label class="form-label" asp-for="@Model.SelectedAuthor"></label>

                <select id="AuthorSelect" asp-for="@Model.AuthorId"
                        class="auto-complete-select"
                        data-placeholder="@L["SelectAnAuthor"]"
                        data-allow-clear="true"
                        data-autocomplete-api-url="/api/cms-kit-public/blog-posts/authors"
                        data-autocomplete-display-property="userName"
                        data-autocomplete-value-property="id"
                        data-autocomplete-items-property="items"
                        data-autocomplete-filter-param-name="filter">

                    @if (Model.SelectedAuthor != null)
                    {
                        <option selected value="@Model.AuthorId" selected="selected">@Model.SelectedAuthor.UserName</option>
                    }
                </select>
            </div>
        </abp-column>
    </abp-row>
    <hr />
}

@if (Model.TagId.HasValue)
{
    <h4>@L["Tags"]</h4>
        <span class="badge rounded-pill badge-secondary text-bg-secondary">@Model.FilteredTagName
            <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug" class="text-bg-secondary"><i class="fa fa-close ms-1"></i></a>
        </span>
    <hr />
}

@if (isMarkedItemFeatureEnabled)
{
    var filterOnFavorites = Model.FilterOnFavorites.GetValueOrDefault();
    string icon = filterOnFavorites ? "heart" : "heart-o";
    <abp-button class="favorite-button badge text-bg-light my-2 border-light-subtle"
                button-type="Light"
                icon="@icon text-danger"
                text="@L["FilterOnFavorites"]"
                filter-on-favorites="@filterOnFavorites">
    </abp-button>
}

@if (Model.Blogs.TotalCount > 0)
{
    <abp-row id="blogs-container">
        @foreach (var blog in Model.Blogs.Items)
        {
            <abp-column size="_12" size-md="_6" size-lg="_4">
                <abp-card>
                    @if (isMarkedItemFeatureEnabled)
                    {
                        <div class="position-absolute top-0 end-0 m-3 z-3">
                            <abp-button button-type="Light"
                                        class="favorite-toggle rounded-circle shadow-sm d-flex align-items-center justify-content-center"
                                        abp-tooltip="@L["ToggleFavorite"]">
                                @await Component.InvokeAsync(typeof(MarkedItemToggleViewComponent), new
                                    {
                                        entityId = blog.Id.ToString(),
                                        entityType = BlogPostConsts.EntityType
                                    })
                            </abp-button>
                        </div>
                    }
                    @if (blog.CoverImageMediaId != null)
                    {
                        <img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
                    }
                    else
                    {
                        <img src="@(dummyImageSource)?text=@blog.Title" class="card-img-top" />
                    }
                    <abp-card-body class="p-4">
                        <h5>@blog.Title</h5>
                        <p class="mb-2">
                            <span class="font-weight-bold author-name-span" data-author-id="@blog.Author.Id">@@@blog.Author?.UserName</span>
                            <small style="opacity:.65;">@blog.CreationTime</small>
                        </p>
                        <p class="cms-blogpost-desc-preview">@blog.ShortDescription</p>
                        <div class="d-grid gap-2">
                            <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug/@blog.Slug" class="btn btn-light">
                                @L["Read"]
                            </a>
                        </div>
                    </abp-card-body>
                </abp-card>
            </abp-column>
        }
    </abp-row>
    <abp-row>
        <abp-column>
            <abp-paginator model="Model.PagerModel" />
        </abp-column>
    </abp-row>
}
else
{
    <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center py-5">
        <h1><i class="fa fa-ban"></i></h1>
        <h3>@L["NoBlogPostYet"]</h3>
    </div>
}
